<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="/static/webuploader.css" th:href="@{/static/webuploader.css}"/>
<!--引入JS-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/webuploader.js" th:src="@{/static/webuploader.js}"></script>
<style>
</style>
<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="list" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>
</body>

<script>
    let fileMd5;
    // 初始化Web Uploader
    const uploader = WebUploader.create({
        server: '/file/upload',// 文件接收服务端。
        pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        method: 'POST', // 文件上传方式，POST或者GET，默认Post
    });
    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
        $('#list').append('<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>');

    });

    $('#ctlBtn').on('click', function () {
        uploader.upload();
    });

    uploader.on('uploadSuccess', function (file) {
        $('#' + file.id).find('p.state').text('已上传');
    });

    uploader.on('uploadError', function (file) {
        $('#' + file.id).find('p.state').text('上传出错');
    });

    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').fadeOut();
    });

    // 计算MD5 值并传递给后台
    uploader.on('uploadBeforeSend', function (obj, data) {
        uploader.md5File(obj.file)//MD5计算
            // 及时显示进度
            .progress(function (percentage) {
                console.log('Percentage:', percentage);
            })
            // 计算MD5 这里会异步操作，导致发送请求时并没有携带MD5
            .then(function (md5) {
                fileMd5 = md5;
                console.log('data result:', data);
                console.log('md5 result:', md5);
            });

    });
</script>
</html>
